<template>
  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="8" :offset="0">
      <el-tree
        ref="tree"
        :data="treeData"
        :highlight-current="true"
        @node-click="onNodeClick"
      ></el-tree>
    </el-col>
    <el-col :span="16" :offset="0">
      {{ itemInfo.label }}
      <img
        :src="itemInfo.img"
        style="height: 60px; width: 60px"
        v-show="itemInfo.img"
      />
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: 'xx旅',
          children: [
            {
              label: 'xx 排',
              children: [
                {
                  label: 'xx 连',
                  img: require('@/assets/images/IMG_1154.jpg'),
                },
                {
                  label: 'xx 2连',
                  img: require('@/assets/images/IMG_1155.jpg'),
                },
              ],
            },
          ],
        },
      ],
      itemInfo: {
        label: '',
        img: '',
      },
    };
  },
  methods: {
    onNodeClick(data, node, item) {
      console.log(data, node, item);
      if (node.isLeaf) {
        this.itemInfo = data;
      }
    },
  },
};
</script>
